<template>
  <div class="main-page">
    <div class="page-header">
      <div class="page-header-title">辽宁省房地产市场监测系统 —— 房地产金融</div>
      <div class="page-header-filtrate">
        <public-change-province-city :cityList="mapList" :currentCity="cityObj.code" @changeCity="changeCity" />
        <month-range-time-filtrate-public class="page-header-filtrate-month-range" :month-range="monthRange" @changeFiltrateTime="changeMonthRange" />
      </div>
      <div class="bcak-home-btn" @click="goBackHomePage()">返回首页</div>
    </div>
    <div class="main-content">
      <div class="page-header-title1">房地产贷款</div>
      <el-row :gutter="30">
        <!-- 房地产贷款余额 - 总量 -->
        <el-col :span="12">
          <div class="module-item dominance-inventory-sales-cycle">
            <div class="module-item-title">
              <span>房地产贷款余额 - 总量</span>
            </div>
            <div class="module-item-content">
              <div class="add-trend-l-content-top">
                <div>
                  <p>累计：<span>0</span>亿元</p>
                  <p>同比：<span>0</span>%</p>
                </div>
              </div>
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 房地产贷款余额 - 增速 -->
        <el-col :span="12">
          <div class="module-item recessiveness-inventory-sales-cycle">
            <div class="module-item-title">
              <span>房地产贷款余额 - 增速</span>
            </div>
            <div class="module-item-content">
              <div class="add-trend-l-content-top">
                <div>
                  <p></p>
                  <p></p>
                </div>
              </div>
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData1)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData1).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData1"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 新增个人住房贷款 - 总量 -->
        <el-col :span="12">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span>新增个人住房贷款 - 总量</span>
            </div>
            <div class="module-item-content">
              <div class="add-trend-l-content-top">
                <div>
                  <p>累计：<span>0</span>亿元</p>
                  <p>同比：<span>0</span>%</p>
                </div>
              </div>
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 新增个人住房贷款 - 增速 -->
        <el-col :span="12">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span>新增个人住房贷款 - 增速</span>
            </div>
            <div class="module-item-content">
              <div class="add-trend-l-content-top">
                <div>
                  <p></p>
                  <p></p>
                </div>
              </div>
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData1)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData1).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData1"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="page-header-title2">城市房地产融资协调机制</div>
      <el-row :gutter="0">
        <div class="fdcjr-blist-box">
          <div class="fdcjr-blist-item">
            <img src="@/assets/img/propertyWatch/Fdcjr1.png" alt="" />
            <div>
              <p class="fdcjr-blist-item-num">{{ personHouseData.getHouseSalesAmountData.bmd }}</p>
              <p>推送白名单项目总数</p>
            </div>
          </div>
          <div class="fdcjr-blist-item">
            <img src="@/assets/img/propertyWatch/Fdcjr2.png" alt="" />
            <div>
              <p class="fdcjr-blist-item-num">{{ personHouseData.getHouseSalesAmountData.sxxm }}</p>
              <p>获得授信项目总数</p>
            </div>
          </div>
          <div class="fdcjr-blist-item">
            <img src="@/assets/img/propertyWatch/Fdcjr3.png" alt="" />
            <div>
              <p class="fdcjr-blist-item-num">{{ personHouseData.getHouseSalesAmountData.rzxm }}</p>
              <p>获得融资项目总数</p>
            </div>
          </div>
          <div class="fdcjr-blist-item">
            <img src="@/assets/img/propertyWatch/Fdcjr4.png" alt="" />
            <div>
              <p class="fdcjr-blist-item-num">{{ personHouseData.getHouseSalesAmountData.rzxq }}</p>
              <p>融资总需求（万元）</p>
            </div>
          </div>
          <div class="fdcjr-blist-item">
            <img src="@/assets/img/propertyWatch/Fdcjr5.png" alt="" />
            <div>
              <p class="fdcjr-blist-item-num">{{ personHouseData.getHouseSalesAmountData.sxed }}</p>
              <p>授信额度（万元）</p>
            </div>
          </div>
          <div class="fdcjr-blist-item">
            <img src="@/assets/img/propertyWatch/Fdcjr6.png" alt="" />
            <div>
              <p class="fdcjr-blist-item-num">{{ personHouseData.getHouseSalesAmountData.rzed }}</p>
              <p>获得融资额度（万元）</p>
            </div>
          </div>
        </div></el-row
      >
      <el-row :gutter="30">
        <!-- 各城市推送项目排名 -->
        <el-col :span="6">
          <div class="module-item dominance-inventory-sales-cycle">
            <div class="module-item-title">
              <span style="margin-left: 12px">各城市推送项目排名</span>
              <el-tabs v-model="listInd1" class="module-item-title-tabs" @tab-change="changeTab($event, 'listInd1')">
                <el-tab-pane
                  v-for="(item, index) of currentMonthAccumulationTabs"
                  :key="item.value"
                  :label="item.label"
                  :name="item.value"
                ></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <table-list
                v-if="Object.keys(personHouseData.getCityTsRankData).length > 0"
                :housingSupplyStatsData="personHouseData.getCityTsRankData"
                :mapInd="2"
                class="h262"
                style="width: 100%"
              ></table-list>
            </div>
          </div>
        </el-col>
        <!-- 各城市获得融资额度排名 -->
        <el-col :span="6">
          <div class="module-item recessiveness-inventory-sales-cycle">
            <div class="module-item-title">
              <span style="margin-left: 10px">各城市获得融资额度排名</span>
              <el-tabs v-model="listInd2" class="module-item-title-tabs" @tab-change="changeTab($event, 'listInd2')">
                <el-tab-pane
                  v-for="(item, index) of currentMonthAccumulationTabs1"
                  :key="item.value"
                  :label="item.label"
                  :name="item.value"
                ></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <table-list
                v-if="Object.keys(personHouseData.getMonitorSalePriceData).length > 0"
                :housingSupplyStatsData="personHouseData.getMonitorSalePriceData"
                :mapInd="1"
                class="h262"
                style="width: 100%"
              ></table-list>
            </div>
          </div>
        </el-col>
        <!-- 各银行新增授信额度排名 -->
        <el-col :span="6">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span style="margin-left: 12px">各银行新增授信额度排名</span>
            </div>
            <div class="module-item-content">
              <table-list
                v-if="Object.keys(personHouseData.getBankSxedRankData).length > 0"
                :housingSupplyStatsData="personHouseData.getBankSxedRankData"
                :mapInd="1"
                class="h262"
                style="width: 100%"
              ></table-list>
            </div>
          </div>
        </el-col>
        <!-- 各银行新增贷款额度排名 -->
        <el-col :span="6">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span style="margin-left: 12px">各银行新增贷款额度排名</span>
            </div>
            <div class="module-item-content">
              <table-list
                v-if="Object.keys(personHouseData.getDkedRankData).length > 0"
                :housingSupplyStatsData="personHouseData.getDkedRankData"
                :mapInd="1"
                class="h262"
                style="width: 100%"
              ></table-list>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 点击放大 type表示是放大的图  其他根据自己组件调整-->
    <el-dialog v-model="personHouseData.dialogVisible" width="60%">
      <component
        :is="personHouseData.componentName"
        v-if="personHouseData.dialogVisible"
        :housingSupplyStatsData="personHouseData.componentParams"
        :type="1"
        :style="{ height: pxToRem(500) + 'px' }"
      ></component>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import barLinePbulic from "@/components/propertyWatch/barLinePbulicFdcjr.vue";
export default {
  components: { barLinePbulic },
};
</script>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import publicChangeProvinceCity from "@/components/housePropertyDevelopmentConstruction/publicChangeProvinceCity.vue";
import monthRangeTimeFiltratePublic from "@/components/housePropertyDevelopmentConstruction/timeFiltratePublic.vue";
import tableList from "@/components/propertyWatch/tableList.vue";
import { getHouseSalesAmount, getBankSxedRank, getMonitorSalePrice, getCityTsRank, getDkedRank } from "@/api/propertyWatchFdcjr";
import { barLineParamsData } from "@/utils/chartsPbulic";
import usePropertyAlertResale from "@/hooks/propertyWatchFdcjr/usePropertyWatchFdcjr";
import { pxToRem } from "@/utils/index";
const personHouseData = usePropertyAlertResale();
const monthRange = ref<any>(null); // 月范围筛选
const route = useRoute();
const router = useRouter();
const jiaData = ref<any>({
  yAxis: [],
  xAxis: [],
});
const listInd1 = ref(1);
const listInd2 = ref(2);
const ecFun = (data: any, _getData: any, _type: any) => {
  let legendStyle = {
    show: false,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "0%",
    bottom: "5%",
    top: "12%",
  };
  let paramsData = barLineParamsData(
    [_type == "bar" ? "总量" : "增速"],
    ["2024-01", "2024-02", "2024-03", "2024-04", "2024-05", "2024-06", "2024-07", "2024-08", "2024-09"],
    [
      {
        name: "",
        type: "2",
      },
    ],
    [
      {
        name: _type,
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [[0, 0, 0, 0, 0, 0, 0, 0, 0]],
    [
      {
        a: "#1FB7FF",
        b: "#1FB7FF",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData[_getData] = paramsData;
};

// 切换
const changeTab = (event: any, module: string) => {
  if (module == "listInd1") {
    listInd1.value = event;
    getCityTsRankFun();
  }
  if (module == "listInd2") {
    listInd2.value = event;
    getMonitorSalePriceFun();
  }
};
// 房地产金融-各城市推送项目排名 queryType 1推送項目 2授信项目 3 贷款项目
const getCityTsRankFun = async () => {
  let { data } = await getCityTsRank({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0],
    endTime: monthRange.value[1],
    queryType: listInd1.value,
  });
  personHouseData.getCityTsRankData = data;
};
//房地产金融-各城市融资额度排名 queryType 2授信项目 3 贷款项目
const getMonitorSalePriceFun = async () => {
  let { data } = await getMonitorSalePrice({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0],
    endTime: monthRange.value[1],
    queryType: listInd2.value,
  });
  personHouseData.getMonitorSalePriceData = data;
};
//房地产金融-各银行新增授信额度排名
const getBankSxedRankFun = async () => {
  let { data } = await getBankSxedRank({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0],
    endTime: monthRange.value[1],
  });
  personHouseData.getBankSxedRankData = data;
};
// 房地产金融-各银行贷款额度排名
const getDkedRankFun = async () => {
  let { data } = await getDkedRank({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0],
    endTime: monthRange.value[1],
  });
  personHouseData.getDkedRankData = data;
};
// 房地产金融-各银行贷款额度排名
const getHouseSalesAmountFun = async () => {
  let { data } = await getHouseSalesAmount({});
  personHouseData.getHouseSalesAmountData = data;
};

// 其他
const getDevelopInvestmentFun = async () => {
  jiaData.value.yAxis = jiaData.value.yAxis.map(() => 0);
  ecFun(jiaData.value, "getDevelopInvestmentData", "bar");
};
const getDevelopInvestmentFun1 = async () => {
  jiaData.value.yAxis = jiaData.value.yAxis.map(() => 0);
  ecFun(jiaData.value, "getDevelopInvestmentData1", "line");
};

const allFun = async () => {
  await getDevelopInvestmentFun();
  await getDevelopInvestmentFun1();
  await getHouseSalesAmountFun();
  await getCityTsRankFun();
  await getMonitorSalePriceFun();
  await getBankSxedRankFun();
  await getDkedRankFun();
};

const cityObj = ref<any>({
  name: "",
  code: "210000",
}); // 地图-城市code信息
const mapList = ref<any>([
  { name: "辽宁省", code: "210000" },
  { name: "沈阳市", code: "210100" },
  { name: "大连市", code: "210200" },
  { name: "鞍山市", code: "210300" },
  { name: "抚顺市", code: "210400" },
  { name: "本溪市", code: "210500" },
  { name: "丹东市", code: "210600" },
  { name: "锦州市", code: "210700" },
  { name: "营口市", code: "210800" },
  { name: "阜新市", code: "210900" },
  { name: "辽阳市", code: "211000" },
  { name: "盘锦市", code: "211100" },
  { name: "铁岭市", code: "211200" },
  { name: "朝阳市", code: "211300" },
  { name: "葫芦岛市", code: "211400" },
]);
const currentMonthAccumulationTabs = [
  // 当月&累计tabs
  {
    label: "推送项目个数",
    value: 1,
  },
  {
    label: "获得授信项目个数",
    value: 2,
  },
  {
    label: "获得贷款项目个数",
    value: 3,
  },
];
const currentMonthAccumulationTabs1 = [
  // 当月&累计tabs
  {
    label: "新增授信",
    value: 2,
  },
  {
    label: "新增贷款",
    value: 3,
  },
];

// 放大图片
const fullSc = (componentName: any, componentParams: any, max: any, min: any) => {
  console.log(componentName, componentParams);
  personHouseData.dialogVisible = true;
  personHouseData.componentName = componentName;
  personHouseData.componentParams = componentParams;
  personHouseData.max = max;
  personHouseData.min = min;
};

// 返回首页
const goBackHomePage = () => {
  router.go(-1);
};

// 模块切换城市
const changeCity = (cityCode: any) => {
  cityObj.value.code = cityCode;
  allFun();
};

// 月范围筛选
const changeMonthRange = (val: any) => {
  monthRange.value = [val[0], val[1]];
  allFun();
};

onMounted(() => {
  if (route && route.query) {
    cityObj.value.code = route.query?.xzqhdm;
    monthRange.value = [route.query?.startTime, route.query?.endTime];
  }
  allFun();
});
</script>

<style scoped lang="less">
.h263 {
  height: 168px !important;
}
.fdcjr-blist-box {
  display: flex;
  .fdcjr-blist-item {
    width: 254px;
    height: 85px;
    background: rgba(14, 129, 255, 0.16);
    margin-right: 30px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #ffffff;
    .fdcjr-blist-item-num {
      font-weight: bold;
      font-size: 26px;
      color: #60f9f4;
    }
    img {
      width: 60px;
      height: 60px;
      margin-left: 16px;
      margin-right: 14px;
    }
  }
}
.add-trend-l-content-top {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  div {
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    line-height: 17px;
    margin-top: 4px;
    p {
      span {
        color: #e4871d;
        margin: 0 4px;
      }
    }
    p:nth-child(2) {
      margin-left: 20px;
    }
  }
}
.page-header-title1,
.page-header-title2 {
  font-size: 18px;
  color: #a6edff;
  line-height: 60px;
  text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
}
.page-header-title2 {
  line-height: 0px;
  margin-top: -10px;
  margin-bottom: 30px;
}
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyDevelopmentConstruction/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100px;
    background-image: url("@/assets/img/housePropertyDevelopmentConstruction/header-bg.png");
    background-size: 100% 100%;

    &-title {
      position: absolute;
      left: 50px;
      font-size: 35px;
      color: #a6edff;
      text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
    }

    &-filtrate {
      position: relative;
      display: flex;
      align-items: center;
      top: 15px;
      left: 150px;

      .filtrate-city {
        width: 120px;

        /deep/ .el-select__wrapper {
          font-size: 15px;
        }

        margin-right: 30px;
      }

      .page-header-filtrate-month-range {
        /deep/ .el-range-input,
        /deep/ .el-range-separator {
          font-size: 15px;
          font-weight: lighter;
        }
      }
    }

    .bcak-home-btn {
      position: absolute;
      top: 52px;
      right: 50px;
      font-size: 20px;
      color: #7bebed;
      cursor: pointer;
    }
  }

  .main-content {
    padding: 0 20px;

    > .el-row:not(:last-child) {
      margin-bottom: 30px;
    }

    .module-item {
      width: 100%;
      height: 213px !important;
      margin-bottom: 20px;
      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-header-bg.png");
        background-size: 100% 100%;

        > span {
          font-size: 15px;
          color: white;
          margin-left: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &-tabs {
          position: absolute;
          right: 00px;
        }
      }

      &-content {
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-content-bg.png");
        background-size: 100% 100%;
        position: relative;

        .module-item-chart-tabs {
          position: absolute;
          right: 0;
          top: 5px;
        }
      }
    }
  }
}

:deep(.el-tabs) {
  display: flex;
  align-items: center;
  padding: 0;

  .el-tabs__header {
    margin: 0;
  }

  .el-tabs__nav-wrap:after {
    height: 0;
  }

  .el-tabs__active-bar {
    height: 0;
  }

  .el-tabs__item {
    // width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 3px !important;
    font-size: 12px;
    height: 20px;
    cursor: pointer;
    color: white;
    background: rgb(9, 31, 63);
  }

  .el-tabs__item.is-active {
    background: #2187f4;
  }
}

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__title {
    font-size: 30px;
    color: white;
  }

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}
</style>
